<template>
    <div class="video-management-table">
        <HTable :data="files" :search="search" @handleEdit="handleEdit" @handleDelete="handleDelete"
            @pageChangeHandle="pageChangeHandle" :total="fileCount" :pageSize="pageSize.size" :propBlackList="propBlackList"
            :fields="fields" editText="编辑" deleteText="删除"></HTable>
    </div>
</template>
<script lang="ts" setup>
import { getCurrentInstance, onMounted, ref, computed, toRaw } from "vue"
import HTable from "@/components/ElementPlusWrapper/table/HTable.vue";
import { useStore } from "vuex";

const { emit } = getCurrentInstance();
const store = useStore();

const files = computed(() => store.state.admin.fileManagement.files)
const fileForm = computed(() => store.state.admin.fileManagement.fileForm)
const fields = [
    { label: "ID", prop: "_id" },
    { label: "名称", prop: "name" },
    { label: '拓展名', prop: 'extname' },
    { label: '类型', prop: 'type' },
    { label: '路径', prop: 'shortPath' },
    { label: '上传者', prop: 'uploadName' },
    { label: '大小', prop: 'newSize' },
    { label: '设备', prop: 'cameraName' },
    { label: '创建日期', prop: 'createdAt' },
    { label: '更新日期', prop: 'updatedAt' },
]
const propBlackList = ["_v"]
const search = ref("")
const dialogVisible = computed(() => store.state.admin.fileManagement.dialogVisible)
const handleEdit = (index?: number, row?: any) => {
    store.commit('admin/fileManagement/_setState', { path: 'dialogVisible', value: true })
    const newRow = JSON.parse(JSON.stringify(row))
    if (newRow.shortPath && newRow.shortPath.includes('/')) {
        newRow.path = newRow.shortPath.split('/')
    } else {
        newRow.path = [newRow.shortPath]
    }
    store.commit('admin/fileManagement/_setState', { path: 'fileForm', value: newRow })
    store.commit('admin/fileManagement/_setState', { path: 'fileFormComponent.formStatus', value: '编辑' })
}
const handleDelete = (index?: number, row?: any) => {
    store.dispatch('admin/fileManagement/deleteFile', row)
}

const fileCount = computed(() => store.state.admin.fileManagement.fileCount)
const pageSize = computed(() => store.state.admin.fileManagement.fileListPageAndSize)
const pageChangeHandle = (page: number) => {
    store.commit('admin/fileManagement/_getAndUpdateFileList', {
        page: page || store.getters['admin/fileManagement/getPage'],
        pageSize: store.getters['admin/fileManagement/getSize']
    })
}

</script>
